<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>秀视频后台管理平台-专栏模块</title>
<meta name="keywords" content="秀视频后台管理平台">
<meta name="description" content="秀视频后台管理平台欢迎您的到来">
<link rel="shortcut icon" href="favicon.ico">
<link href="../css/github-gist.css" rel="stylesheet">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/font-awesome.css" rel="stylesheet">
<link href="../css/plugins/bootstrap-table/bootstrap-table.min.css"
	rel="stylesheet">
<link href="../css/animate.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<link href="../css/index.css" rel="stylesheet">
<link href="../css/base.css" rel="stylesheet">
<link href="../css/fakeLoader.css" rel="stylesheet">
<link href="../css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

<style>
.news_infos span {
	font-size: 13px;
}

#picker {
	display: none;
}
</style>
</head>

<body class="white-bg" style="opacity: 0">
	<div id="fakeloader"></div>
	<div class="wrapper wrapper-content">
		<div class="ibox float-e-margins">
			<div class="ibox-title">
				<h5>专栏管理</h5>
				<div class="ibox-tools">
					<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
					</a> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i
						class="fa fa-wrench"></i>
					</a>
					<ul class="dropdown-menu dropdown-user">
						<li><a href="#">选项1</a></li>
						<li><a href="#">选项2</a></li>
					</ul>
					<a class="close-link"> <i class="fa fa-times"></i>
					</a>
				</div>
			</div>
			<div class="ibox-content">
				<div class="row row-lg">
					<div class="example">
						<table id="allBlog" data-mobile-responsive="true">

						</table>
						<div id="toolbar">
							<button class="type btn btn-outline btn-primary" type="button"
								id="typeButton" value="5">全部</button>

							<a data-toggle="modal" href="./column_management.html#modal-form"><button
									class="type btn btn-success btn-primary" type="button">发布</button></a>

							<button class=" btn btn-danger" type="button"
								onclick="getSelectRows(2)">
								<i class="fa fa-remove"></i> 删除
							</button>
						</div>
					</div>
				</div>

				<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog"
					aria-hidden="true">
					<div class="modal-dialog" style="width: 702px">
						<div class="modal-content animated fadeInUp">
							<button type="button" class="close" style="margin-right: 7px"
								data-dismiss="modal">
								<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
							</button>
							<div class="infos" style="margin: 0px;">
								<div class="newsview" style="padding-top: 0px;">
									<h3 class="news_title"></h3>
									<div class="news_author">
										<span class="au01">徐塬峰</span><span class="au02"></span><span
											class="au03">共<b></b>人围观
										</span>
									</div>
									<div class="tags"></div>
									<div class="news_about">
										<strong>简介</strong><span class="news_intr"> </span>
									</div>
									<div class="news_infos"></div>
								</div>
							</div>
							<div class="modal-footer">
								<span class="update"></span>
								<button type="button" class="btn btn-primary"
									data-dismiss="modal">关闭</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="modal-form" class="modal fade" aria-hidden="true">
			<div class="modal-dialog">
				<!-- 创建专栏 -->
				<div class="ibox-content">
					<form enctype="multipart/form-data" id="myform" method="post"
						class="form-horizontal" action="../../category/add">
						<div class="form-group">
							<label class="col-sm-2 control-label">专栏名称</label>
							<div class="col-sm-10">
								<input id="name" name="name" type="text" class="form-control">
							</div>
						</div>
						<div class="hr-line-dashed"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">简介</label>
							<div class="col-sm-10">
								<input id="description" name="description" type="text"
									class="form-control">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">预览</label>
							<div class="col-sm-6">
								<img src="../img/video.jpg" id="img" style="width: 160px; height: 160px;">
							</div>
						</div>
						<div class="form-group">
							<label for="jobData" class="control-label"
								style="float: left; padding-left: 15px;">上传图片</label>

							<div class="col-xs-12 col-sm-4 col-md-4">
								<div class="file-container"
									style="display: inline-block; position: relative; overflow: hidden; vertical-align: middle">
									<button class="btn btn-success fileinput-button" type="button">选择图片</button>
									<input type="file" id="file" name="file"
										onchange="loadFile(this.files[0])"
										style="position: absolute; top: 0; left: 0; font-size: 34px; opacity: 0">
								</div>
								<span id="filename" style="vertical-align: middle">未上传文件</span>
							</div>
						</div>

						<div class="form-group">
							<div class="col-sm-4 col-sm-offset-2">
								<button class="btn btn-primary" type="button" id="tableSumbit">提交内容</button>
								<button class="btn btn-white" type="button" id="cancel">取消</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>

		<script src="../js/jquery.min.js"></script>
		<script src="../js/highlight.pack.js"></script>
		<script>
			hljs.initHighlightingOnLoad();
		</script>
		<script src="../js/bootstrap.min.js"></script>
		<!-- 自定义js -->
		<script src="../js/plugins/sweetalert/sweetalert.min.js"></script>
		<script src="../js/contabs.js"></script>
		<script src="../js/fakeLoader.min.js"></script>
		<!-- Bootstrap table -->
		<script src="../js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
		<script
			src="../js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
		<script
			src="../js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
		<script src="../js/colum/column.js"></script>
		<script>
		$("#cancel").click(function()
		{
			$('#modal-form').modal('hide');
			$("#allBlog").bootstrapTable('refresh');
		})
		$("#tableSumbit").click(function()
				{
			       var form = new FormData();
			       var name=$("#name").val();
			       var description=$("#description").val();
			       var fileObj = document.getElementsByName("file")[0].files[0];     
			       form.append("name",name);
			       form.append("description",description);
			       form.append("file",fileObj);     
			          　$.ajax({
			               url:"../../category/add",
			               type:"post",
			               data:form,
			               processData:false,
			               contentType:false,
			               success:function(data){
			               swal("提交成功","","success");
			        
			                $('#modal-form').modal('hide');
							$("#allBlog").bootstrapTable('refresh');

			               }
			     });
			
				})
		</script>


		<script>
			function loadFile(file) {
				$("#filename").html(file.name);
				var fileName = $("#file").val();
		        var fileObj = document.getElementsByName("file")[0].files[0];
		        var reader = new FileReader();
		        reader.readAsDataURL(fileObj);
		        reader.onload = function (ev) {
		            $("#img").attr("src", ev.target.result);
		        }
		        if (fileName == '' || fileName == undefined) {
		            swal("文件名称不能为空", "请重新操作", "error");
		            $("#file").empty();
		            return;
		        }
		        if (fileObj.size >= 10240000)  //10M以上的图片无法上传
		        {
		            swal("图片大小超出限制", "请重新操作", "error");
		            return;
		        }
		        var jpg = (fileName.indexOf(".jpg") > -1) || (fileName.toLowerCase().indexOf(".jpg") > -1);
		        var png = (fileName.indexOf(".png") > -1) || (fileName.toLowerCase().indexOf(".png") > -1);
		        var jpeg = (fileName.indexOf(".jpeg") > -1) || (fileName.toLowerCase().indexOf(".jpeg") > -1);
		        //判断文件是否是图片类型
		        if (jpg || png || jpeg) {

		        } else {
		            swal("请选择图片类型的图片", "请重新操作", "error");
		            $("#file").empty();
		            return;
		        }
			}
		</script>
</body>
</html>
